<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--计算属性：
    是根据已有的属性计算得出的结果，只有在依赖的属性发生变化之后，然后，才重新计算
-->
<div id="app">
  姓名：{{getName()}},年龄：{{user.age}} <br>
  姓名：{{getName()}},年龄：{{user.age}} <br>

  <!--    使用计算属性的时候，跟普通属性一样-->
  计算属性：{{name}}, <br>
  计算属性：{{name}}, <br>
  msg: {{msg}} <br>
  <input type="text" v-model="name">
</div>
<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      msg: 'xxx',
      user: {
        firstName: "李",
        lastName: "四",
        age: 20
      }
    },
    computed: {
      // 只有getter的计算属性
      // name:function(){
      //     console.log("computed 拼接姓名。。。")
      //     return this.user.firstName + this.user.lastName;
      // },
      // // 只要依赖的属性发生了变化，才会重新计算,有getter和setter的计算属性
      name: {
        get: function () {
          console.log("computed 拼接姓名。。。")
          return this.user.firstName + this.user.lastName;
        },
        // val 是设置属性的时候给的新值
        set: function (val) {
          if (val) {
            this.user.firstName = val.substring(0, 1);
            this.user.lastName = val.substring(1);
          }
        }
      }
    },
    methods: {
      // 只要data部分的数据发生了变化，就会重新计算
      getName: function () {
        console.log("拼接姓名。。。")
        return this.user.firstName + this.user.lastName;
      }
    }
  });

</script>

</body>
</html>
